<template>
    <div class="page-min">
        <el-table
                max-height="720"
                :data="this.tableData.slice((this.currentPage-1)*this.pageSize,this.currentPage*this.pageSize)"
                border
                :header-cell-style="{background:'#F0F1F6',color:'#333'}"
                style="width: 100%;">
            <el-table-column
                    prop="reportNo"
                    label="报告号">
            </el-table-column>
            <el-table-column
                    prop="projectName"
                    label="项目名称">
            </el-table-column>
            <el-table-column
                    prop="progress"
                    label="项目进度">
            </el-table-column>
            <el-table-column
                    prop="outputAmount"
                    label="产值金额">
            </el-table-column>
        </el-table>
        <el-pagination
                style="float: right; margin-right: 50px; margin-top: 20px"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="this.currentPage"
                :page-sizes="[10, 20, 30, 40]"
                layout="total, sizes, prev, pager, next, jumper"
                :total=this.total>
        </el-pagination>
    </div>
</template>

<script>
  import { projectOutputValueDetailList } from "@/api/report"

  export default {
    props:{
      userId: {
        type: String,
        default: ''
      }
    },
    data(){
      return{
        tableData: [],
        currentPage: 1,
        total: 0,
        pageSize:10,
      }
    },
    created() {
      this.getList()
    },
    methods: {
      getList(){
        projectOutputValueDetailList({userId: this.userId}).then((r) =>{
          if (r.code !== 200) {
            this.$message.error(r?.msg)
            this.tableData =[]
          }
          else {
            if (r.rows.length){
              this.tableData = r?.rows
              this.total = r?.total
            }else {
              this.tableData =[]
            }
          }
        })
      },
      handleSizeChange(size){
        this.pageSize = size
      },
      handleCurrentChange(current){
        this.currentPage = current
      },
    },
    watch: {
      userId: function () {
        this.getList()
      }
    }
  }
</script>

<style scoped lang="scss">
.page-min{
    margin: 10px;
    background-color: #fff;
    border:1px solid #ddd;
    border-radius:4px;
    padding:10px;
    max-height: 500px;
    overflow: auto;
}
</style>